<template>
	<view class="my-enclosure">
		<view class="list">
			<view
				class="item"
				v-for="(item, idx) in dataObj.list"
				:key="idx"
				@click="onPageTap(item)">
				<view class="content"  :class="pageObj.manage ? 'opts' : ''">
					<view class="select" :class="item.selected ? 'selected' : ''" @click.stop="onSelectTap(idx)"></view>
					<image class="cover" :src="item.image_url"></image>
					<view class="title">{{item.name}}</view>
					<view class="info">
						<span class="type">{{item.type}}</span>
						<span class="time">{{item.time}}</span>
					</view>
				</view>
				<!-- <view
					class="content"
					:data-index="idx"
					@touchstart="drawStart"
					@touchmove="drawMove"
					@touchend="drawEnd"
					:style="'left:'+item.left+'px'">
					<image class="cover" :src="item.image_url"></image>
					<view class="title">{{item.name}}</view>
					<view class="info">
						<span class="type">{{item.type}}</span>
						<span class="time">{{item.time}}</span>
					</view>
				</view> -->
				<!-- 删除按钮 -->
				<!-- <view class="del-btn" @click="onDelTap(item)">删除</view> -->
			</view>
		</view>
		<!-- <view class="footer">
			<view class="btn">
				<view class="btn-post" @click="onUploadTap">上传</view>
			</view>
		</view> -->
		<view class="footer">
			<view class="f-block" v-if="pageObj.manage">
				<view class="select-all" :class="pageObj.isALL ? 'selected' : ''" @click="onSelectAllTap">全选</view>
				<view class="sum">
					<span class="del-sum">{{sum}}</span>个
				</view>
				<view class="btn del" @click="onDelTap">删除</view>
				<view class="btn finish" @click="pageObj.manage = false">完成</view>
			</view>
			<view class="f-block" v-else>
				<view class="btn-post" @click="onUploadTap">上传</view>
				<view class="btn manage" @click="pageObj.manage = true">管理</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { requestErrorTip } from '@/common/tools.js';
	
	export default {
		data() {
			return {
				pageObj: {
					touchObj: {
						startX: 0
					},
					delWidth: 0,
					isALL: false,
					manage: false
				},
				dataObj: {
					list: [],
				}
			}
		},
		onLoad() {
			this.getData(); // 获取数据
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.getData(); // 获取数据
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		computed: {
			// 选中数量
			sum: function() {
				let sum = 0;
				let hasNoSelect = false; // 判断是否存在一个数据没有选中
				const list = this.dataObj['list'];
				for(let i in list){
					const item = list[i];
					if (item['selected']) {
						sum++;
					} else {
						hasNoSelect = true;
					}
				}
				if (hasNoSelect || list.length === 0) {
					// 至少一个未有选中，则设置全部为选中
					this.pageObj['isALL'] = false;
				} else {
					// 全部都选中的，则设置全部为不选中
					this.pageObj['isALL'] = true;
				}
				return sum;
			}
		},
		methods: {
			init() {
				// select中的参数就如css选择器一样选择元素
				const query = uni.createSelectorQuery().in(this);
				query.select('.del-btn').boundingClientRect(data => {
					this.pageObj['delWidth'] = data.width;
				}).exec();
			},
			// 选择单个
			onSelectTap(index) {
				let list = this.dataObj['list'];
				list[index]['selected'] = !list[index]['selected'];
			},
			// 滑动的开始事件
			drawStart(e) {
				const touch = e.touches[0];
				this.pageObj['touchObj']['startX'] = touch.clientX;
			},
			// 删除
			onDelTap() {
				let ids = '';
				const list = this.dataObj['list'];
				for(let i in list) {
					const item = list[i];
					if (item['selected']) {
						if (ids) {
							ids += ',' + item['order_id'];
						} else {
							ids = item['order_id'];
						}
					}
				}
				if (this.sum <= 0) {
					// 显示模态框
					uni.showModal({
						title: '温馨提示',
						showCancel: false,
						content: '您还未选择附件哦！',
						confirmColor: '#FE6B00'
					});
					return false;
				}
				this.postDelData(ids);
			},
			// 提交删除
			postDelData(order_ids) {
				// this.$Requset({
				// 	url: this.$Api['order']['del'],
				// 	data: {
				// 		order_ids: order_ids,
				// 	},
				// 	loading: false,
				// 	success: (res) => {
				// 		const { status, msg } = res;
				// 		requestErrorTip('toast', msg);
				// 		this.pageObj['isALL'] = false;
				// 		this.getData();
				// 	},
				// 	fail: (err) => {
				// 		console.log(err);
				// 	}
				// })
			},
			// 滑动的移动事件
			drawMove(e) {
				const delWidth = this.pageObj['delWidth'];
				const touch = e.touches[0];
				const index = e.currentTarget.dataset.index;
				const disX = touch.clientX - this.pageObj['touchObj']['startX'];
				if (disX < 0) {
					if (disX < -(delWidth * 0.4)) {
						this.dataObj['list'][index]['left'] = -delWidth;
						return false;
					}
					this.dataObj['list'][index]['left'] = disX;
				} else {
					if (this.dataObj['list'][index]['left'] + disX > 0) {
						this.dataObj['list'][index]['left'] = 0;
						return false;
					}
					this.dataObj['list'][index]['left'] += disX;
				}
			},
			// 滑动的结束事件
			drawEnd(e) {
				const delWidth = this.pageObj['delWidth'];
				const index = e.currentTarget.dataset.index;
				const left = this.dataObj['list'][index]['left'];
				if (-left < delWidth * 0.4) {
					this.dataObj['list'][index]['left'] = 0;
				}
			},
			// 删除商品
			// onDelTap(item) {
			// 	this.postDelData(item.id, () => {
			// 		const index = this.dataObj['list'].indexOf(item);
			// 		if (index > -1) {
			// 			this.dataObj['list'].splice(index, 1);
			// 		}
			// 	});
			// },
			// 页面跳转
			onPageTap(data) {
				uni.navigateTo({
					url: './web-view?url=' + data.file_path + '&title=' + data.name
				});
			},
			// 上传
			onUploadTap() {
				const _this = this;
				const imgMaxNum = 9;
				uni.chooseImage({
					count: imgMaxNum, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择和拍照
					success: (res) => {
						const tempFilePaths = res.tempFilePaths;
						_this.imgList = res.tempFilePaths;
						for (let i = 0; i < tempFilePaths.length; i++) {
							uni.uploadFile({
								url: 'https://www.renbang.hcxtec.com/api',//上传的服务器地址
								filePath: tempFilePaths[i],
								method: 'POST',
								name: "file",
								formData: {
									token: uni.getStorageSync('token'),
									address: 'user/uploadMyFile',
									file_type: 1
								},
								success: res => {
									const {data, status} = JSON.parse(res.data);
									if (status) {
										// this.dataObj['list'] = this.dataObj['list'].concat(data);
										this.getData();
									}
									
								}
							});
						}
					}
				});
			},
			// 提交删除接口
			postDelData(id, callBack) {
				uni.showModal({
					title: "提示",
					content: "是否要删除该附件",
					confirmColor: '#FE6B00',
					success: (res) => {
						if (res.confirm) {
							// 确定按钮
							callBack && callBack();
						}
					}
				})
				// this.$Requset({
				// 	url: this.$Api['cart']['del'],
				// 	data: {
				// 		ids: [id]
				// 	},
				// 	success: (res) => {
				// 		const { data, status } = res;
				// 		if (!status) {
				// 			return;
				// 		}
				// 		callBack && callBack();
				// 	},
				// 	fail: (err) => {
					// 	requestErrorTip('toast', msg);
					// }
				// })
			},
			// 获取数据
			getData() {
				this.$Requset({
					url: this.$Api['user']['getMyFileList'],
					data: {},
					success: (res) => {
						const { data, status, msg } = res;
						if (!status) {
							requestErrorTip('toast', msg);
							return;
						}
						this.dataObj['list'] = data.filter(item => {
							item['selected'] = false;
							return item;
						});
					},
					fail: (err) => {
						console.log(err);
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #f5f5f5;
	}
	.my-enclosure{
		padding-top: 18rpx;
		padding-bottom: 102rpx;
		.list{
			.item{
				position: relative;
				height: 192rpx;
				border-radius: 22rpx;
				margin-bottom: 18rpx;
				// background-color: $color-common;
				.select{
					position: absolute;
					top: 32rpx;
					left: 36rpx;
					width: 40rpx;
					height: 40rpx;
					background-repeat: no-repeat;
					background-position: center center;
					background-size: 100%;
					background-image: url(../../../static/images/cart/select.png);
				}
				.selected{
					background-image: url(../../../static/images/cart/selected.png);
				}
				.del-btn{
					position: absolute;
					top: 0;
					right: 0;
					width: 100rpx;
					height: 100%;
					line-height: 192rpx;
					font-size: 28rpx;
					color: #FFFFFF;
					text-align: center;
				}
				.content{
					box-sizing: border-box;
					position: absolute;
					z-index: 1;
					top: 0;
					left: 0;
					width: 100%;
					padding: 32rpx 36rpx 32rpx 188rpx;
					border-radius: 22rpx;
					background-color: #FFFFFF;
					.cover{
						position: absolute;
						top: 32rpx;
						left: 36rpx;
						width: 128rpx;
						height: 128rpx;
						background-color: #EEE;
						border-radius: 8rpx;
					}
					.title{
						height: 88rpx;
						line-height: 44rpx;
						font-size: 30rpx;
						color: #1A1A1A;
						margin-bottom: 10rpx;
						word-break: break-all;
					}
					.info{
						height: 30rpx;
						line-height: 30rpx;
						font-size: 22rpx;
						color: #7F7F7F;
						.time{
							float: right;
						}
					}
				}
				.opts{
					padding-left: 268rpx;
					.cover{
						left: 112rpx;
					}
				}
			}
		}
		.footer{
			box-sizing: border-box;
			position: fixed;
			z-index: 99;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 100rpx;
			padding: 15rpx 200rpx 15rpx 36rpx;
			background-color: #FFFFFF;
			.select-all{
				float: left;
				position: relative;
				line-height: 70rpx;
				width: 66rpx;
				font-size: 26rpx;
				color: #1A1A1A;
				padding-left: 48rpx;
				margin-right: 14rpx;
				&::before{
					content: '';
					position: absolute;
					top: 50%;
					margin-top: -20rpx;
					left: 0;
					width: 40rpx;
					height: 40rpx;
					background-repeat: no-repeat;
					background-position: center center;
					background-size: 100%;
					background-image: url(../../../static/images/cart/select.png);
				}
				&::after{
					content: '';
					position: absolute;
					top: 50%;
					margin-top: -18rpx;
					right: 0;
					width: 1rpx;
					height: 36rpx;
					background-color: #E4EAED;
				}
			}
			.selected{
				&::before{
					background-image: url(../../../static/images/cart/selected.png);
				}
			}
			.sum{
				line-height: 70rpx;
				font-size: 26rpx;
				color: #1A1A1A;
				.del-sum{
					font-size: 40rpx;
					font-weight: bold;
					color: $color-common;
					vertical-align: bottom;
					margin-right: 10rpx;
				}
			}
			.btn-post{
				height: 70rpx;
				line-height: 70rpx;
				font-size: 26rpx;
				color: #FFFFFF;
				text-align: center;
				background-color: $color-common;
				border-radius: 36rpx;
			}
			.btn{
				position: absolute;
				top: 15rpx;
				right: 36rpx;
				width: 150rpx;
				height: 70rpx;
				line-height: 70rpx;
				font-size: 26rpx;
				color: #FFFFFF;
				text-align: center;
				background-color: $color-common;
				border-radius: 35rpx;
			}
			.del{
				right: 200rpx;
			}
			.finish, .manage{
				background-color: #373737;
			}
		}
	}
</style>
